<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>玄机科技</title>
    <link rel="shortcut icon" href="img/logo1.png">
    <!--引入css文件 -->
    <link rel="stylesheet" href="css/mystery.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入bootstrap下的css文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入bootstrap下的js文件 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入js文件 -->
    <script src="js/mystery.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div class="container-fluid">
            <!-- 头部区域 -->
            <div class="header w">
                <div class="logo">
                    <a href="./玄机科技.html"> <img :src="logoImg"></a>
                </div>
                <!-- 导航栏 start -->
                <div class="nav">
                    <ul>
                        <li><a :href="about.name" target="_self">{{about.value}}</a></li>
                        <li>{{brand}}
                            <ul>
                                <li class="xl" v-for="imgSrc in imgSrc"><img :src="imgSrc"></li>
                            </ul>
                        </li>
                        <li v-for="navList in navList"><a :href="navList.name" target="_self">{{navList.value}}</a></li>
                    </ul>
                </div>
                <!-- 导航栏 end-->
            </div>
            <!-- 中上部区域 -->
            <div id="main" class="w">
                <!-- 滚轮 -->
                <div class="sr">
                    <div class="li1">
                        <img :src="wxImg">
                        <div class="li2">
                            <img :src="QRCode">
                        </div>
                        <div class="li3">
                            <p></p>
                        </div>
                    </div>
                    <div class="li1" v-for="rollerBarImgList in rollerBarImgList">
                        <img :src="rollerBarImgList.img">
                        <div :class="rollerBarImgList.className"><a href="#">{{rollerBarImgList.value}}</a></div>
                    </div>
                </div>
                <!-- 轮播图 start-->
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators 小圆点 -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                    </ol>
                    <!-- Wrapper for slides 轮播图片 -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="img/1.png" alt="...">
                        </div>
                        <div class="item">
                            <img src="img/2.png" alt="...">
                        </div>
                        <div class="item">
                            <img src="img/3.png" alt="...">
                        </div>
                        <div class="item">
                            <img src="img/4.png" alt="...">
                        </div>
                        <div class="item">
                            <img src="img/5.png" alt="...">
                        </div>
                    </div>
                    <!-- Controls 左右箭头 -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <!-- 轮播图 end-->
            </div>
            <!-- 中下部区域 -->
            <div class="box w">
                <ul class="box_bd">
                    <li v-for="boxImgList in boxImgList"><img :src="boxImgList"></li>
                </ul>
            </div>
            <!-- 底部区域 -->
            <div class="footer w">
                <!-- 左侧 -->
                <div class="bottomLeft">
                    <a></a>
                </div>
                <!-- 右侧 -->
                <div class="bottomRight">
                    <ul>
                        <li>
                            <a href="#" v-for="bottomList in bottomList"> {{bottomList}} <span>|</span></a>

                        </li>
                        <li v-for="textList in textList">
                            <a href="#">{{textList}}</a>
                        </li>
                        <li>
                            <a href="#">
                                <img :src="bottomLogo" alt="">{{tel}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <style>
        .li4 {
            height: 38px;
            top: 54px;
        }
        
        .li5 {
            height: 39px;
            top: 102px;
        }
        
        .li6 {
            top: 151px
        }
    </style>
</body>

</html>